<div class="dashboard-editor-header">
	<div class="dashboard-editor-title">
		<i class="icon icon-calendar-empty"></i>
		Custom time range
	</div>
</div>

<div class="dashboard-editor-body">
	<style>
		.timepicker-to-column {
			margin-top: 10px;
		}

		.timepicker-input input {
			outline: 0 !important;
			border: 0px !important;
			-webkit-box-shadow: 0;
			-moz-box-shadow: 0;
			box-shadow: 0;
			position: relative;
		}

		.timepicker-input input::-webkit-outer-spin-button,
		.timepicker-input input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

		input.timepicker-date {
			width: 90px;
		}

		input.timepicker-hms {
			width: 20px;
		}

		input.timepicker-ms {
			width: 25px;
		}

		div.timepicker-now {
			float: right;
		}
	</style>

	<div class="timepicker form-horizontal">
		<form name="input">

			<div class="timepicker-from-column">
				<label class="small">From</label>

				<div class="fake-input timepicker-input">
					<input class="timepicker-date" type="text"
						   ng-change="validate(temptime)"
						   ng-model="temptime.from.date"
						   data-date-format="yyyy-mm-dd" required
						   bs-datepicker/>@
					<input class="timepicker-hms" type="text" maxlength="2"
						   ng-change="validate(temptime)"
						   ng-model="temptime.from.hour" required
						   ng-pattern="patterns.hour" onClick="this.select();"/>:
					<input class="timepicker-hms" type="text" maxlength="2"
						   ng-change="validate(temptime)"
						   ng-model="temptime.from.minute" required
						   ng-pattern="patterns.minute"
						   onClick="this.select();"/>:
					<input class="timepicker-hms" type="text" maxlength="2"
						   ng-change="validate(temptime)"
						   ng-model="temptime.from.second" required
						   ng-pattern="patterns.second"
						   onClick="this.select();"/>.
					<input class="timepicker-ms" type="text" maxlength="3"
						   ng-change="validate(temptime)"
						   ng-model="temptime.from.millisecond" required
						   ng-pattern="patterns.millisecond"
						   onClick="this.select();"/>
				</div>
			</div>

			<div class="timepicker-to-column">

				<label class="small">To (<a class="link"
											ng-class="{'strong':temptime.now}"
											ng-click="setNow();temptime.now=true">now</a>)</label>

				<div class="fake-input timepicker-input">
					<div ng-hide="temptime.now">
						<input class="timepicker-date" type="text"
							   ng-change="validate(temptime)"
							   ng-model="temptime.to.date"
							   data-date-format="yyyy-mm-dd" required
							   bs-datepicker/>@
						<input class="timepicker-hms" type="text" maxlength="2"
							   ng-change="validate(temptime)"
							   ng-model="temptime.to.hour" required
							   ng-pattern="patterns.hour"
							   onClick="this.select();"/>:
						<input class="timepicker-hms" type="text" maxlength="2"
							   ng-change="validate(temptime)"
							   ng-model="temptime.to.minute" required
							   ng-pattern="patterns.minute"
							   onClick="this.select();"/>:
						<input class="timepicker-hms" type="text" maxlength="2"
							   ng-change="validate(temptime)"
							   ng-model="temptime.to.second" required
							   ng-pattern="patterns.second"
							   onClick="this.select();"/>.
						<input class="timepicker-ms" type="text" maxlength="3"
							   ng-change="validate(temptime)"
							   ng-model="temptime.to.millisecond" required
							   ng-pattern="patterns.millisecond"
							   onClick="this.select();"/>
					</div>
					<span type="text" ng-show="temptime.now"
						  ng-disabled="temptime.now">&nbsp <i
							class="pointer icon-remove-sign"
							ng-click="setNow();temptime.now=false;"></i> Right Now <input
							type="text" name="dummy" style="visibility:hidden"/></span>
				</div>
			</div>

		</form>
		<div class="clearfix"></div>
	</div>
</div>

<div class="dashboard-editor-footer">
	<form name="input" style="margin-bottom:0">
		<span class="" ng-hide="input.$valid">Invalid date or range</span>
		<button ng-click="setAbsoluteTimeFilter(validate(temptime));dismiss();"
				ng-disabled="!input.$valid" class="btn btn-success">Apply
		</button>
		<button ng-click="dismiss();" class="btn btn-success pull-right">
			Cancel
		</button>
	</form>
</div>
